<template>
	<u-popup 
		mode="bottom" 
		v-model="visible" 
		:closeable="false" 
		:mask-close-able="maskCloseAble"
		border-radius="20" 
		:safe-area-inset-bottom="true"
		:negative-top="negativeTop"
		:height="height"
		:custom-style="customStyle"
		@close="close"
		@open="open"
		:mask-custom-style="{background: 'rgba(0, 0, 0, 0.5)'}"
		>
		<view :style="'height: 100%;background-color: '+backgroundColor+';'">
			<view v-if="showTitle">
				<slot name="title">
					<view class="f-popup-default-title">
						<view class="f-popup-default-btn-left">
							<view class="f-popup-default-btn" @click="onCancel">{{cancelText}}</view>
						</view>
						<view v-if="title" class="f-popup-default-title" style="border-bottom: none;">{{title}}</view>
						<view class="f-popup-default-btn-right">
							<view class="f-popup-default-btn" @click="onOk">{{okText}}</view>
						</view>
					</view>
				</slot>
			</view>
			<slot/>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"r-popup",	
		model:{
			prop:"show",
			event:"close"
		},
		computed:{
			visible: {
				// getter
				get: function () {
				  if(this) {
				  	return this.show;
				  } else {
				  	return false;
				  }
				},
				set: function (v) {
					if(v) {
						this.open();
					} else {
						this.close();
					}
				}
			}
		},
		props:{
			show:{
				type:Boolean,
				default:false
			},
			negativeTop:{
				type:[Number,String],
				default:0
			},
			showTitle:{
				type:Boolean,
				default:true
			},
			height:{
				type:[Number,String],
				default:''
			},
			customStyle:{
				type:[Object],
				default:null
			},
			cancelText:{
				type:String,
				default:''
			},	
			okText:{
				type:String,
				default:''
			},	
			title:{
				type:String,
				default:''
			},
			maskCloseAble:{
				type:Boolean,
				default:false
			},
			backgroundColor:{
				type:String,
				default:'#f7f7f7'
			}
		},
		methods:{
			onCancel() {
				this.$emit("onCancel");
			},
			onOk() {
				this.$emit("onOk");
			},
			close() {
				this.$emit("close");
			},
			open() {
				this.$emit("open");
			},
		}
	}
</script>

<style scoped>
	.f-popup-default-title {
		height: 112rpx;
		overflow: hidden;
        background: #FFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 34rpx;
		border-bottom: 2rpx solid #EBEBEB;
	}
	.f-popup-default-btn {
		font-size: 34rpx;
		font-weight: bold;
		color: #007AFF;
		line-height: 48rpx;
	}
	.f-popup-default-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #1C1D1F;
		line-height: 48rpx;
	}
	.f-popup-default-btn-left {
		min-width: 100rpx;
		display: flex;
		flex-direction: row;
	}
	.f-popup-default-btn-right {
		min-width: 100rpx;
		display: flex;
		flex-direction: row-reverse;
	}
	.uni-scroll-view {
		background-color: #F7F7F7;
	}
</style>
